<div class="header-main">
    <div class="header-container container container-xxl">
        <div class="header-wrap">
            <!-- Logo @s -->
            <button id="resButton2"  [style.display] = 'showMoreFeaturesAdmin' (click)='handleSidebar2()'><img  src="./assets/images/resButton.png" style="width: 27px; filter: invert(100%);" alt=""></button>
            <button id="resButton" [style.display] = 'showMoreFeatures' (click)='handleSidebar()'><img  src="./assets/images/resButton.png" style="width: 27px; filter: invert(100%);" alt=""></button>
            <div  class="header-logo logo animated" data-animate="fadeInDown" data-delay=".6">
                <a href="index.html" class="logo-link">
                    <!-- <img class="logo-dark" src="images/logo-s2-white.png" srcset="images/logo-s2-white2x.png 2x" alt="logo"> -->

                    <h4><img src="./assets/images/social_logo.png" alt="logo"><span
                            style="padding: 2px 8px;"><span style="color: #f42f54;" class="text1">ODI
                            </span><span style="color: white;" class="text2">CRYPTO</span></span>
                    </h4>
                </a>
            </div>

            <!-- Menu Toogle @s -->
            <div class="header-nav-toggle">
                <a href="#" class="navbar-toggle" data-menu-toggle="header-menu">
                    <div class="toggle-line">
                        <span></span>
                    </div>
                </a>
            </div>

            <!-- Menu @s -->
            <div class="header-navbar animated" data-animate="fadeInDown" data-delay=".6">
                <nav class="header-menu" id="header-menu">
                    <ul class="menu">
                        <li class="menu-item ">
                            <a class="menu-link " (click)='reloadSite()' routerLink="home">Home</a>
                            <!-- <div class="menu-sub menu-drop menu-mega menu-mega-3clmn">
<div class="menu-mega-innr">
    <ul class="menu-mega-list">
        <li class="menu-item"><a href="index-azalea.html">Azalea Dark<span class="badge badge-xs badge-light">v1.6</span></a></li>
        <li class="menu-item"><a href="index-azalea-multi.html">Azalea Multi<span class="badge badge-xs badge-light">v1.6</span></a></li> 
        <li class="menu-item"><a href="index-gentian.html">Gentian Dark<span class="badge badge-xs badge-light">v1.5</span></a></li>
        <li class="menu-item"><a href="index-gentian-pro.html">Gentian Pro<span class="badge badge-xs badge-light">v1.5</span></a></li>
        <li class="menu-item"><a href="index-gentian-multi.html">Gentian Multi<span class="badge badge-xs badge-light">v1.5</span></a></li>
        <li class="menu-item"><a href="index-zinnia.html">Zinnia Pro</a></li>
        <li class="menu-item"><a href="index-salvia.html">Salvia Pro</a></li>
    </ul>
    <ul class="menu-mega-list">
        <li class="menu-item"><a href="index-lungwort.html">Lungwort Dark</a></li>
        <li class="menu-item"><a href="index-jasmine.html">Jasmine Light</a></li>
        <li class="menu-item"><a href="index-lobelia.html">Lobalia Dark</a></li>
        <li class="menu-item"><a href="index-muscari.html">Muscari Pro</a></li>
        <li class="menu-item"><a href="index-lavender.html">Lavender Pro</a></li>
        <li class="menu-item"><a href="index-azure-pro.html">Azure Pro</a></li>
        <li class="menu-item"><a href="index-azure.html">Azure Dark</a></li>
    </ul>
    <ul class="menu-mega-list">
        <li class="menu-item"><a href="index-dark-pro.html">Default Dark Pro</a></li>
        <li class="menu-item"><a href="index-light.html">Default Light</a></li>
        <li class="menu-item"><a href="index-dark.html">Default Dark</a></li>
        <li class="menu-item"><a href="index-linum-wallet.html">Linum Wallet<span class="badge badge-xs badge-light">v1.8</span></a></li>
        <li class="menu-item"><a href="index-flax-wallet.html">Flax Wallet<span class="badge badge-xs badge-light">v1.8</span></a></li>
        <li class="menu-item"><a href="index-crocus-multi.html">Crocus Multi<span class="badge badge-xs badge-light">v1.9</span></a></li>
        <li class="menu-item"><a href="index-cyanus-multi.html">Cyanus Multi<span class="badge badge-xs badge-info">NEW</span></a></li>
    </ul>
</div>
</div> -->
                        </li>
                        <li class="menu-item ">
                            <a class="menu-link " routerLink="about">About Us</a>

                        </li>
                        <li class="menu-item ">
                            <a class="menu-link " routerLink="odi-tokens">ODI Tokens</a>

                        </li>
                        <li class="menu-item ">
                            <a class="menu-link " routerLink="features">Features</a>

                        </li>
                        <li class="menu-item ">
                            <a class="menu-link" routerLink="news">News</a>

                        </li>
                        <li class="menu-item ">
                            <a class="menu-link " routerLink="calculator">Calculator</a>

                        </li>
                        <li class="menu-item ">
                            <a class="menu-link " routerLink="contact-us">Contact Us</a>

                        </li>

                        <!-- <li class="menu-item has-sub">
<a class="menu-link nav-link menu-toggle" href="#">Pages</a>
<ul class="menu-sub menu-drop menu-mega menu-mega-2clmn">
<div class="menu-mega-innr">
    <ul class="menu-mega-list">
        <li class="menu-item"><a class="menu-link nav-link" href="page-about.html">About Us - Base</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="page-about-v2.html">About Us - Linum</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="page-about-v3.html">About Us - Cyanus<span class="badge badge-dot"></span></a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="page-team.html">Our Teams</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="page-wallets.html">Wallets -v1</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="page-wallets-v2.html">Wallets -v2</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="page-features.html">Features</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="page-token-sale.html">Token Sale</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="page-roadmap.html">Roadmap</a></li>
    </ul>
    <ul class="menu-mega-list">
        <li class="menu-item"><a class="menu-link nav-link" href="page-download.html">Download</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="page-faq.html">FAQs</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="page-contact.html">Contact - Base</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="page-contact-v2.html">Contact - Cyanus<span class="badge badge-dot"></span></a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="page-exchange.html">Exchange - Cyanus<span class="badge badge-dot"></span></a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="page-partner.html">Partner - Cyanus<span class="badge badge-dot"></span></a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="page-mission.html">Mission - Cyanus<span class="badge badge-dot"></span></a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="page-career.html">Career - Cyanus<span class="badge badge-dot"></span></a></li>
    </ul>
</div>
</ul>
</li> -->
                        <!-- <li class="menu-item has-sub">
<a class="menu-link nav-link menu-toggle" href="#">Blog & Misc</a>
<ul class="menu-sub menu-drop">
<li class="menu-item has-sub">
    <a class="menu-link nav-link menu-toggle" href="#">Blog Pages</a>
    <ul class="menu-sub menu-drop">
        <li class="menu-item"><a class="menu-link nav-link" href="blog-3clmn.html">Blog 3 Column</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="blog-sidebar-left.html">Blog Sidebar - Left</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="blog-sidebar-right.html">Blog Sidebar - Right</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="blog-details.html">Blog Single - Sidebar</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="blog-details-full.html">Blog Single - Full Width</a></li>
    </ul>
</li>
<li class="menu-item has-sub">
    <a class="menu-link nav-link menu-toggle" href="#">Ath Pages</a>
    <ul class="menu-sub menu-drop">
        <li class="menu-item"><a class="menu-link nav-link" href="page-login.html">Login - v1</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="page-register.html">Register - v1</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="page-reset.html">Reset - v1</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="page-login-v2.html">Login - v2</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="page-register-v2.html">Register - v2</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="page-reset-v2.html">Reset - v2</a></li>
    </ul>
</li>
<li class="menu-item has-sub">
    <a class="menu-link nav-link menu-toggle" href="#">Coming Soon<span class="badge badge-xs badge-info">NEW</span></a>
    <ul class="menu-sub menu-drop">
        <li class="menu-item"><a class="menu-link nav-link" href="coming-soon-azalea.html" target="_blank">Coming Soon - Azalea</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="coming-soon-gentian.html" target="_blank">Coming Soon - Gentian</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="coming-soon-gentian-alt.html" target="_blank">Coming Soon - Gentian Alt</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="coming-soon-dark.html" target="_blank">Coming Soon - Dark</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="coming-soon-light.html" target="_blank">Coming Soon - Light</a></li>
    </ul>
</li>
<li class="menu-item has-sub">
    <a class="menu-link nav-link menu-toggle" href="#">Error 404<span class="badge badge-xs badge-info">NEW</span></a>
    <ul class="menu-sub menu-drop">
        <li class="menu-item"><a class="menu-link nav-link" href="error-404-gentian.html" target="_blank">404 - Gentian</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="error-404-gentian-alt.html" target="_blank">404 - Gentian Alt</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="error-404-azalea.html" target="_blank">404 - Azalea</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="error-404-dark.html" target="_blank">404 - Dark</a></li>
        <li class="menu-item"><a class="menu-link nav-link" href="error-404-light.html" target="_blank">404 - Light</a></li>
    </ul>
</li>
</ul>
</li> -->
                        <!-- <li class="menu-item has-sub">
<a class="menu-link nav-link menu-toggle" href="#">Elements</a>
<div class="menu-sub menu-drop menu-mega menu-mega-2clmn">
<div class="menu-mega-innr">
    <ul class="menu-mega-list">
        <li class="menu-item"><a href="element-alert.html">Alert</a></li>
        <li class="menu-item"><a href="element-button.html">Buttons</a></li>
        <li class="menu-item"><a href="element-content.html">Contents</a></li>
        <li class="menu-item"><a href="element-table.html">Tables</a></li>
        <li class="menu-item"><a href="element-video.html">Videos</a></li>
        <li class="menu-item"><a href="element-typography.html">Typography</a></li>
        <li class="menu-item"><a href="element-progress-bar.html">Progress Bar</a></li>
        <li class="menu-item"><a href="element-form.html">Form Elements</a></li>
        <li class="menu-item"><a href="element-icon.html">Custom Icons<span class="badge badge-xs badge-info">v1.6.2</span></a></li>
    </ul>
    <ul class="menu-mega-list">
        <li class="menu-item"><a href="element-tab.html">Tabs</a></li>
        <li class="menu-item"><a href="element-grid.html">Grids</a></li>
        <li class="menu-item"><a href="element-color.html">Colors</a></li>
        <li class="menu-item"><a href="element-modal.html">Modals</a></li>
        <li class="menu-item"><a href="element-chart.html">Charts</a></li>
        <li class="menu-item"><a href="element-notification.html">Notification</a></li>
        <li class="menu-item"><a href="element-countdown.html">Countdown</a></li>
        <li class="menu-item"><a href="element-accordion.html">Accordions</a></li>
    </ul>
</div>
</div>
</li> -->
                        <!-- <li class="menu-item has-sub">
<a class="menu-link nav-link menu-toggle" href="#">Blocks</a>
<div class="menu-sub menu-drop menu-mega menu-mega-2clmn">
<div class="menu-mega-innr">
    <ul class="menu-mega-list">
        <li class="menu-item"><a href="block-navbar.html">Navbar</a></li>
        <li class="menu-item"><a href="block-page-header.html">Page Header</a></li>
        <li class="menu-item"><a href="block-footer.html">Footer</a></li>
        <li class="menu-item"><a href="block-team.html">Team</a></li>
        <li class="menu-item"><a href="block-banner.html">Banner <span class="badge badge-xs badge-hot">Hot</span></a></li>
        <li class="menu-item"><a href="block-faq.html">FAQs</a></li>
        <li class="menu-item"><a href="block-subscribe.html">Subscribe</a></li>
    </ul>
    <ul class="menu-mega-list">
        <li class="menu-item"><a href="block-roadmap.html">Roadmaps</a></li>
        <li class="menu-item"><a href="block-partner.html">Partners</a></li>
        <li class="menu-item"><a href="block-token-info.html">Token Info</a></li>
        <li class="menu-item"><a href="block-feature-card.html">Features Card</a></li>
        <li class="menu-item"><a href="block-feature-panel.html">Features Panel</a></li>
        <li class="menu-item"><a href="block-ath.html">Login / Register</a></li>
        <li class="menu-item"><a href="block-contact.html">Contact</a></li>
    </ul>
</div>
</div>
</li> -->
                    </ul>

                    <ul class="menu-btns">
                        <li [style.display]='hideLogin'><a href="page-login.html" data-toggle="modal" data-target="#login-popup"
                                class="btn btn-md btn-thin btn-outline btn-auto btn-primary btn-round no-change"><span>Login
                                    / Register</span></a></li>
                                    <div class="profile1-toggle" [style.display] = 'showMoreFeatures'>
                                        <li class="topbar-nav-item relative">
                                            <span class="user-welcome d-none d-lg-inline-block">Welcome! {{user_name}}</span>
                                            <a class=" user-thumb" id="profile" type="button" (click)='handleAccount()'><img src="./assets/images/accountLogo.png"
                                                    alt=""></a>
                                            <div
                                                class=" dropdown-content dropdown-content-right dropdown-arrow-right user-dropdown" [style.display]='showAccount'>
                                                <div class="user-status">
                                                    <h6 class="text-white">{{user_email}} <small
                                                            class="text-white-50">{{user_token_id}}</small></h6>
                                                    <h6 class="user-status-title">Token Balance</h6>
                                                    <div class="user-status-balance">0 <small>AXT</small></div>
                                                </div>
                                                <ul class="user-links">
                                                    <li><a href="login.html"><img src="./assets/images/accountLogo.png" alt=""> My
                                                            Profile</a></li>
                                                    <li><a href="https://axtract.co.uk"><img src="./assets/images/refer.png" alt="">
                                                            Referral</a></li>
                                                    <li><a href="https://axtract.co.uk"><img src="./assets/images/mobile.png"
                                                                alt=""> Activity</a></li>
                                                </ul>
                                                <ul class="user-links bg-light">
                                                    <li><a (click)="LogOut()" type="button"
                                                            ><img
                                                                src="./assets/images/logout.png" alt=""> Logout</a></li>
                                                </ul>
                                                <form id="logout-form" action="login.html" method="POST" style="display: none;">
                                                    <input type="hidden" name="_token"
                                                        value="HGFm4jOgJ29mmSOujeEE1Wgz9PsNOLLvIYmsqfXz"> </form>
                                            </div>
                                            <script>
                                                document.querySelector('.user-dropdown').style.display = 'none'
                                            </script>
                                        </li>
                                    </div>
                                    <div class="profile1-toggle" [style.display] = 'showMoreFeaturesAdmin'>
                                        <li class="topbar-nav-item relative">
                                            <span class="user-welcome d-none d-lg-inline-block">Welcome! {{user_name}}</span>
                                            <a class=" user-thumb" id="profile" type="button" (click)='handleAccount()'><img src="./assets/images/accountLogo.png"
                                                    alt=""></a>
                                            <div
                                                class=" dropdown-content dropdown-content-right dropdown-arrow-right user-dropdown" [style.display]='showAccount'>
                                                <div class="user-status">
                                                    <h6 class="text-white">{{user_email}} <small
                                                            class="text-white-50">{{user_token_id}}</small></h6>
                                                    <h6 class="user-status-title">Token Balance</h6>
                                                    <div class="user-status-balance">0 <small>AXT</small></div>
                                                </div>
                                                <ul class="user-links">
                                                    <li><a href="login.html"><img src="./assets/images/accountLogo.png" alt=""> My
                                                            Profile</a></li>
                                                    <li><a href="https://axtract.co.uk"><img src="./assets/images/refer.png" alt="">
                                                            Referral</a></li>
                                                    <li><a href="https://axtract.co.uk"><img src="./assets/images/mobile.png"
                                                                alt=""> Activity</a></li>
                                                </ul>
                                                <ul class="user-links bg-light">
                                                    <li><a (click)="LogOut()" type="button"
                                                            ><img
                                                                src="./assets/images/logout.png" alt=""> Logout</a></li>
                                                </ul>
                                                <form id="logout-form" action="login.html" method="POST" style="display: none;">
                                                    <input type="hidden" name="_token"
                                                        value="HGFm4jOgJ29mmSOujeEE1Wgz9PsNOLLvIYmsqfXz"> </form>
                                            </div>
                                            <script>
                                                document.querySelector('.user-dropdown').style.display = 'none'
                                            </script>
                                        </li>
                                    </div>
                    </ul>
                    
                </nav>
            </div><!-- .header-navbar @e -->
        </div>
    </div>
</div><!-- .header-main @e -->
<section class="flexSection" style="background-color: #f7fafdeb;" [style.display]='showSidebar2'>
        
    <div class="d-flex" >
        
      <div class="side-bar" >
          <div class="img" style="padding-top: 50px;">
              <img src="./assets/images/accountLogo.png" alt="">
              <h4 class="my-2">{{user_name}}</h4>
          </div>
    
        <ul class="user-icon-nav" style="padding-top: 20px;">
            <li class="menu-item ">
                <a class="menu-link" routerLink="admin/dashboard"><img src="./assets/dashboard.png" style="filter: invert(100%);" alt=""> Dashboard</a>
               
            </li>
            <li class="menu-item has-sub">
                <a class="menu-item has-sub " style="color: white;"><img src="./assets/settings.png" style="filter: invert(100%);" alt=""> Setting</a>
                <div class="menu-sub menu-drop menu-mega menu-mega-3clmn">
                    <div class="menu-mega-innr">
                        <ul class="menu-mega-list">
                            <li class="menu-link new"><a class="new2" routerLink="admin/setting/ico">ICO/STO Setting<span ></span></a></li>
                            <li class="menu-link new"><a class="new2" routerLink="admin/setting/website">Website Setting<span ></span></a></li> 
                            <li class="menu-link new"><a class="new2" routerLink="admin/setting/referal">Referral Setting<span ></span></a></li>
                            <li class="menu-link new"><a class="new2" routerLink="admin/setting/mailing">Mailing Setting<span ></span></a></li>
                            <li class="menu-link new"><a class="new2" routerLink="admin/setting/payment-method">Payment Methods<span ></span></a></li>
                            <li class="menu-link new"><a class="new2" routerLink="admin/setting/manage-pages">Manage Pages<span ></span></a></li>
                            <li class="menu-link new"><a class="new2" routerLink="admin/setting/application-api">Application Api</a></li>
                            <li class="menu-link new"><a class="new2" routerLink="admin/setting/manage-languages">Manage Langauges</a></li>
                          
                        </ul>
                       
                    </div>
                </div>
            </li>
            <li class="menu-item ">
                <a class="menu-link " routerLink="admin/kyc"><img src="./assets/kyc.png" style="filter: invert(100%);" alt=""> KYC List</a>
               
            </li>
            <li class="menu-item ">
                <a class="menu-link " routerLink="admin/users-list"><img src="./assets/people.png" style="filter: invert(100%);" alt=""> UsersList</a>
               
            </li>
            <li class="menu-item ">
                <a class="menu-link " routerLink="admin/ico"><img src="./assets/coins.png" style="filter: invert(100%);" alt=""> ICO/STO Stage</a>
               
            </li>

     
            <li class="menu-item ">
                <a class="menu-link" routerLink="admin/transactions"><img src="./assets/transaction.png" style="filter: invert(100%);" alt=""> Transactions</a>
               
            </li>
        
            </ul>
      </div>
    </div>
</section>
<section class="flexSection" style="background-color: #f7fafdeb;" [style.display]='showSidebar' >
        
    <div class="d-flex" >
        
      <div class="side-bar" >
          <div class="img" style="padding-top: 50px;">
              <img src="./assets/images/accountLogo.png" alt="">
              <h4 class="my-2">{{user_name}}</h4>
          </div>
    
        <ul class="user-icon-nav" style="padding-top: 20px;">
            <li class="menu-item ">
                <a class="menu-link side" routerLink="dashboard"  routerLinkActive="active"><img src="./assets/images/dashboard.png" alt=""> Dashboard</a>
               
            </li>
            <li class="menu-item ">
                <a class="menu-link side " routerLink="buy-token"><img src="./assets/images/buy_token.png" alt=""> Buy Token</a>
               
            </li>
            <li class="menu-item ">
                <a class="menu-link side" routerLink="transactions"><img src="./assets/images/transaction.png" alt=""> Transactions</a>
               
            </li>
            <li class="menu-item ">
                <a class="menu-link side" routerLink="profile"><img src="./assets/images/user.png" alt=""> Profile</a>
               
            </li>
            <li class="menu-item ">
                <a class="menu-link side" routerLink="my-token"><img src="./assets/images/my token.png" alt=""> My Token</a>
               
            </li>

     
            <li class="menu-item ">
                <a class="menu-link side" routerLink="kyc-application">KYC Application</a>
               
            </li>
        
            </ul>
            
          
      </div>
  
        
    </div>
</section>
<div class="modal fade" #close_modal   id="login-popup">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <a href="#" class="modal-close" data-dismiss="modal" #closebutton aria-label="Close"><em
                    class="ti ti-close"></em></a>
            <div class="ath-container m-0">
                <div class="ath-body bg-theme tc-light">
                    <h5 class="ath-heading title">Sign in <small class="tc-default">with your ODI
                            Account</small></h5>
                    <form #LoginForm="ngForm" (submit)="GetLoginValues(LoginForm.value)" >
                        <div class="field-item">
                            <div class="field-wrap">
                                <input type="email" ngModel name="Email" class="input-bordered" placeholder="Your Email" required email #Email="ngModel" >
                                <small class="form-text text-muted" *ngIf="Email.touched && !Email.valid">Enter Valid Email</small>
                            </div>
                        </div>
                        <div class="field-item">
                            <div class="field-wrap">
                                <input type="password" ngModel name="Password" class="input-bordered" placeholder="Password" required >
                                
                            </div>
                        </div>
                        <div class="field-item d-flex justify-content-between align-items-center">
                            <div class="field-item pb-0">
                                <input class="input-checkbox" name="remember" id="remember-me-100" type="checkbox">
                                <label for="remember-me-100">Remember Me</label>
                            </div>
                            <div class="forget-link fz-6">
                                <a href="#" data-toggle="modal" data-dismiss="modal"
                                    data-target="#reset-popup">Forgot password?</a>
                            </div>
                        </div>
                        <button 
                        
                            class="btn btn-primary btn-block " [disabled]="!LoginForm.valid"  >Sign In </button>
                    </form>
                    <div class="sap-text"><span>Or Sign In With</span></div>

                    <ul class="row gutter-20px gutter-vr-20px">
                        <li class="col"><a href="#" class="btn btn-md btn-facebook btn-block"><em
                                    class="icon fab fa-facebook-f"></em><span>Facebook</span></a></li>
                        <li class="col"><a href="#" class="btn btn-md btn-google btn-block"><em
                                    class="icon fab fa-google"></em><span>Google</span></a></li>
                    </ul>
                    <div class="ath-note text-center">
                        Don’t have an account? <a href="#" data-toggle="modal" data-dismiss="modal"
                            data-target="#register-popup"> <strong>Sign up here</strong></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="register-popup">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <a href="#" class="modal-close" data-dismiss="modal" aria-label="Close"><em
                    class="ti ti-close"></em></a>
            <div class="ath-container m-0">
                <div class="ath-body bg-theme tc-light">
                    <h5 class="ath-heading title">Sign Up <small class="tc-default">Create New TokenWiz
                            Account</small></h5>
                    <form #SignUpForm="ngForm" (ngSubmit)="GetSignUpValues(SignUpForm.value)">
                        <div class="field-item">
                            <div class="field-wrap">
                                <input type="text" name="vUserName"  ngModel class="input-bordered" placeholder="Your Name" required>
                            </div>
                        </div>
                        <div class="field-item">
                            <div class="field-wrap">
                                <input type="email" name="vEmail" ngModel class="input-bordered" placeholder="Your Email" required email #vEmail="ngModel">
                                <small class="form-text text-muted" *ngIf="vEmail.touched && !vEmail.valid">Enter Valid Email</small>
                            </div>
                        </div>
                        <div class="field-item">
                            <div class="field-wrap">
                                <input type="password" name="vPassword" ngModel class="input-bordered" placeholder="Password" required>
                            </div>
                        </div>
                        <div class="field-item">
                            <div class="field-wrap">
                                <input type="password" name="vRepeatPasswod" ngModel class="input-bordered" placeholder="Repeat Password" required>
                            </div>
                        </div>
                        <div class="field-item">
                            <input class="input-checkbox" id="agree-term-2" type="checkbox">
                            <label for="agree-term-2">I agree to Icos <a href="#">Privacy Policy</a> &amp; <a
                                    href="#">Terms</a>.</label>
                        </div>
                        <button class="btn btn-primary btn-block btn-md" [disabled]="!SignUpForm.valid">Sign Up</button>
                    </form>
                    <div class="sap-text"><span>Or Sign Up With</span></div>

                    <ul class="row gutter-20px gutter-vr-20px">
                        <li class="col"><a href="#" class="btn btn-md btn-facebook btn-block"><em
                                    class="icon fab fa-facebook-f"></em><span>Facebook</span></a></li>
                        <li class="col"><a href="#" class="btn btn-md btn-google btn-block"><em
                                    class="icon fab fa-google"></em><span>Google</span></a></li>
                    </ul>
                    <div class="ath-note text-center">
                        Already have an account? <a href="#" data-toggle="modal" data-dismiss="modal"
                            data-target="#login-popup"> <strong>Sign in here</strong></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
